<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>微博发布</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script src="js/jquery-1.4.2.min.js"></script>
<script src="js/common.js"></script>
<script src="js/consumer.js?v=2.4"></script>
<script src="js/oauth.js?v=1020"></script>
<script src="js/sha1.js"></script>
<script src="js/base64.js"></script>

<style>
body {
	color:#333;
	line-height:180%;
	margin:0;
	padding:0;
	text-align:center;
	overflow:hidden;
	font-size:12px;
	background:#A4E2EB url(images/weibo_post_bodybg.gif) repeat-x;
}
*{font-family:微软雅黑,Trebuchet MS, Arial, Helvetica, Sans-Serif;}
*:focus {outline: 0;} 
#main{background:url(images/weibo_post_bg.gif?v=3); width:580px;height:315px;position:relative;padding:0px;margin:0px;}
#account{position:absolute;right:20px;top:30px}
#wordcount{position:absolute;right:50px;top:80px}
#wordcount span{font-size:30px;font-weight:bold;font-family: Constantia, Georgia;}
#text{position:absolute;width:480px;height:105px;left:48px;top:113px;}
#text textarea{width:480px;height:100px;border:none;font-size:12px;resize:none;}

#btn_post{position:absolute;top:252px;right:45px;width:70px;height:28px;}
.btn_post_green{background:url(images/publish_btn.png) -3px -4px;cursor:pointer}
.btn_post_green:hover{background:url(images/publish_btn.png) -3px -39px;}
.btn_post_gray{background:url(images/publish_btn.png?v=1) -3px -71px;}
#post_succ{background:url(images/weibo_post_succ.gif?v=3);width:146px;height:36px;position:absolute;top:150px;left:200px;z-index:999;display:none}
#selectpic{position:absolute;top:225px;left:60px;background:url(images/weibo_selectpic.gif?v=1) no-repeat 0px 2px;z-index:888;width:100px;height:30px;padding-left:20px;text-align:left;cursor:pointer}
#picshow{position:absolute;left:60px;top:250px;width:300px;height:55px;overflow:hidden;}
#picshow img{border:solid #ccc 1px;position:absolute;left:0px;top:0px;z-index:1000;cursor:pointer}

#msg_tip{background:#fff;width:240px;height:45px;position:absolute;top:120px;left:160px;z-index:999;border:solid #fff 1px;border-radius:5px;box-shadow:1px 2px 2px #bbb;display:none;text-align:center;padding-top:30px;opacity:0.8;color:#ff0000;font-size:15px;}

</style>

<script>
var OAuth = OAuth || {};
var accessToken = localStorage.getItem("oauth2_accessToken");
var accessor = consumer["sina"];

var num = 140;
var pd = 0;
function countWord(){
	var ts = $('#wordcount');
	var str = $("#content").val();
	var n = Math.ceil(str.length/2); //调用方法
	pd = num-n;
	if(num-n > 0){
		ts.html('您还可以输入<span>'+(num-n)+'</span>个字');
		$("#btn_post").removeClass("btn_post_gray");
		$("#btn_post").addClass("btn_post_green");
		if(pd == 140){
			$("#btn_post").removeClass("btn_post_green");
			$("#btn_post").addClass("btn_post_gray");
		}
	}else{
		ts.html('您已经超出<span style="color:#ff0000">'+(n-num)+'</span>个字');
		$("#btn_post").removeClass("btn_post_green");
		$("#btn_post").addClass("btn_post_gray");
	}
}

function getQueryString(param,url){
	var params = (url.substr(url.indexOf("?") + 1)).split("&");
	if (params != null){
		for(var i=0;i<params.length;i++){
			var strs=params[i].split("=");
			if(strs[0]==param){
				return decodeURIComponent(strs[1]);
			}
		} 
	}
	return "";
}

function post(){
	var c = $("#content");
	var i=1;
	var j = 0;
	if(pd <= 0 || c.val() == ''){
		showError("微博的内容不能为空！");
	}else{
		if($("#pic").val() == ""){
			$("#weiboform").attr("action", "https://api.weibo.com/2/statuses/update.json");
			$("#weiboform").attr("enctype", "");
		} else {
			$("#weiboform").attr("action", "https://api.weibo.com/2/statuses/upload.json");
			$("#weiboform").attr("enctype", "multipart/form-data");
		}
		$("#weiboform").submit();
		$("#uploadframe").load(function(){
			var result = $(this).contents().find("pre").html();
			var jsonData = JSON.parse(decodeURIComponent(result));
			if(jsonData["id"] > 0){
				showSucc();
			} else {
				showError("微博发布失败！");
			}
		});
	}
}

function init(){
	var userInfoStr = localStorage.getItem("oauth2_userinfo");
	if(checkIfLocal(userInfoStr)){
			var userInfoData = JSON.parse(userInfoStr);
			$("#account").html("你正在使用<b>" + userInfoData["name"] + "</b>账号");
	}
	$("#content").keyup(function(){
		countWord();
	});
	if($("#content").val() == ""){
		$("#btn_post").addClass("btn_post_gray");
	} else {
		$("#btn_post").addClass("btn_post_green");
	}
	$("input[name='access_token']").val(accessToken);
}


function selectPic(){
	$("#selectpic").click(function(){
		$("#pic").click();
	});
	$("#pic").change(function(){
		var file = document.getElementById("pic").files[0];
		if(!/image\/\w+/.test(file.type)){
			alert("请确保文件为图像类型");
			return false;
		}
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function(e){
			var html = "<img src='" +this.result + "' height=55 />";
			$("#picshow").html(html);

			if($("#content").val() == ""){
				$("#content").val("分享图片");
			}
			countWord();
			$("#btn_post").removeClass("btn_post_gray");
			$("#btn_post").addClass("btn_post_green");
		}
		
	});
}

function showSucc(){
	$("#msg_tip").remove();
	$("body").append("<div id='msg_tip'><img src='images/weibo_post_succ.gif?v=3' /></div>");
	$("#msg_tip").fadeIn();
	var t = setTimeout(function(){$("#msg_tip").fadeOut();$("#content").val("");$("#pic").val("");$("#picshow").html("");countWord();}, 2000);
}

function showError(msg){
	$("#msg_tip").remove();
	$("body").append("<div id='msg_tip'>" + msg + "</div>");
	$("#msg_tip").fadeIn();
	var t = setTimeout(function(){$("#msg_tip").fadeOut();}, 2000);
}

$(document).ready(function(){
	init();
	$("#content").focus();
	$("#btn_post").click(function(){
		post();
	});
	var title = getQueryString("title", location.href);
	var url = getQueryString("url", location.href);
	if(title != "" || url != ""){
		$("#content").val(title + " " + url);
		countWord();
	}
	selectPic();
});

</script>
</head>
<body>
<div id="main">
	<iframe name="upload" style="display:none" id="uploadframe"></iframe>
	<form enctype="multipart/form-data" method="post" action="https://api.weibo.com/2/statuses/upload.json" target="upload" id="weiboform">
	<div id="account"></div>
	<div id="wordcount">还可以输入<span>140</span> 字</div>
	<div id="selectpic">选择本地图片</div>
	<div id="text"><textarea id="content" name="status"></textarea></div>
	<div><span id="btn_post"></span></div>
	<div style="position:absolute;left:-700px;"><input type="file" id="pic" name="pic" /></div>
	<div id="picshow"></div>
	<input type="hidden" name="access_token" value="" />
	</form>
</div>
</body>
</html>
